<template>
  <div class="my_network_box">
    <div class="add_btn_top">
      <div v-if="!isTopBtn" class="sw_btn_box">
        <div :style="{ color: switchTextColor, fontSize: '14px' }">
          {{ switchText }}
        </div>
        <el-switch
          v-permission="[4, 'switch']"
          style="margin-left: 10px"
          active-color="#2680D2"
          @change="openScrenn"
          v-model="screen"
        >
        </el-switch>
        <div class="line"></div>
      </div>
      <div>
        <el-button
          v-permission="[1, 'button']"
          v-if="isBtn"
          @click="handAdd"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          >添加</el-button
        >
      </div>
    </div>
    <div class="gateway" v-permission="[4, 'list']">
      <div
        :style="{
          width: screen ? '79%' : '100%',
          background: '#fff',
        }"
      >
        <el-table
          height="100px"
          v-adaptive
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="元数据 :">
                      <span>{{ props.row.metadataCount }}项</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="ID :">
                      <span>{{ props.row.id }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="子网掩码 :">
                      <span>{{ props.row.subnetMask }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="MAC地址 :">
                      <span>{{ props.row.macAddress }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="网关地址 :">
                      <span>{{ props.row.gatewayAddress }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="创建时间 :">
                      <span>{{ formatDateT(props.row.createdDate) }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="图像" align="left">
            <template slot-scope="{ row: { imageUrl } }">
              <img
                style="width: 40px; height: 40px"
                :src="imageUrl | filtersFileUrl()"
              />
            </template>
          </el-table-column>
          <el-table-column label="品牌" prop="brand" align="left">
          </el-table-column>
          <el-table-column label="型号" prop="model" align="left">
          </el-table-column>
          <el-table-column label="IP地址" prop="ip" align="left">
          </el-table-column>
          <el-table-column label="名称" prop="name" align="left">
          </el-table-column>
          <el-table-column label="网关Token" prop="token" align="left">
          </el-table-column>
          <el-table-column
            v-if="!netShow"
            label="网关类型"
            prop=""
            align="left"
          >
            <template slot-scope="scope">
              {{ scope.row.assetType.name }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="{ row: { token } }">
              <span
                style="color: #2680d2; font-size: 16px; margin-right: 10px"
                class="el-icon-edit-outline"
                @click="handEdit(token)"
              ></span>
              <span
                v-permission="[2, 'icon']"
                style="color: #2680d2; font-size: 16px"
                class="el-icon-delete"
                @click="handDel(token)"
              ></span>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          @pagination="pagination"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :pageSizes.sync="pageSizes"
        />
      </div>
      <div v-if="isShowScreen" class="searchForm">
        <div style="width: 100%" v-init-screen-h>
          <div class="select">筛选</div>
          <div class="">
            <div class="searchText">名称</div>
            <el-input
              class="inputStyle"
              v-model="searchName"
              clearable
              size="mini"
              placeholder="输入关键字搜索"
            >
            </el-input>
          </div>
          <div class="">
            <div class="searchText">IP地址</div>
            <el-input
              class="inputStyle"
              v-model="searchIp"
              size="mini"
              placeholder="输入关键字搜索"
            >
            </el-input>
          </div>
          <div class="">
            <div class="searchText">网关类型:</div>
            <el-select
              class="inputStyle w100"
              v-model="gateWayType"
              multiple
              collapse-tags
              filterable
              placeholder="请选择网关类型"
              size="mini"
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="bottomBtn">
          <el-button class="reset" size="mini" style="width: 50%" @click="reSet"
            >重置</el-button
          >
          <el-button
            @click="init"
            class="submit"
            size="mini"
            style="width: 50%"
            type="primary"
            >提交</el-button
          >
        </div>
      </div>
    </div>

    <AddDialog
      ref="addDialgRef"
      :typeList="typeList"
      :showDialog.sync="addFlag"
      @closeDialog="closeDialog"
      :editmetaData="editmetaData"
      :isedit="isedit"
      :token="token"
    ></AddDialog>
  </div>
</template>

<script>
// import adaptive from "../../../../directive/dirIndex.js";
import "../../../../assets/style/deviceCss/filterWindow.css";
import { formatTime } from "@/views/common/js/utils.js";
import Pagination from "@/views/common/page";
import { getAssettypes, getAssetsDetails } from "@/api/assets";
import AddDialog from "./AddDialog.vue";
import _ from "lodash";
import { getAssetGateway } from "@/api/gateway";
import { delAssets, getAssetsList } from "@/api/assets";
export default {
  // directives: { adaptive },
  components: {
    Pagination,
    AddDialog,
  },
  props: {
    isBtn: {
      type: Boolean,
      default: true,
    },
    isShowScreen: {
      type: Boolean,
      default: false,
    },
    isTopBtn: {
      type: Boolean,
      default: true,
    },
    netShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      screen: false,
      switchTextColor: "#666666",
      switchText: "显示筛选",
      addFlag: false,
      total: 0,
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      tableData: [],
      typeList: [],
      editmetaData: {},
      isedit: false,
      token: "",
      assetTypeToken: "",
      searchName: "",
      searchIp: "",
      gateWayType: [],
      rightScreen: false,
    };
  },
  mounted() {
    this.init();
    // this.getAssettypes();
  },
  methods: {
    // 重置
    reSet() {
      this.searchName = "";
      this.searchIp = "";
      this.gateWayType = [];
      this.init();
    },
    // 显示筛选窗
    openScrenn() {
      this.getAssettypes();
      this.$emit("update:isShowScreen", this.screen);
    },
    // 时间格式
    formatDateT(date) {
      return formatTime(date);
    },
    async handEdit(assetToken) {
      // 先获取到网关类型
      const resType = await getAssettypes({ page: 1, pageSize: 0 });
      const { data: dataType } = resType;
      this.typeList = dataType.results;
      getAssetsDetails(assetToken).then((res) => {
        const { data } = res;
        this.$nextTick(() => {
          this.$refs.addDialgRef.deviceGroupForm = data;
          // 编辑弹窗ip格式
          let ipData = [];
          let ipArray = [];
          let gatewayAddressData = [];
          let gatewayAddressArray = [];
          if (!data.gatewayAddress) {
            gatewayAddressArray = [
              {
                value: "",
              },
              {
                value: "",
              },
              {
                value: "",
              },
              {
                value: "",
              },
            ];
          } else {
            gatewayAddressData = data.gatewayAddress.split(".");
            gatewayAddressData.forEach((arg) => {
              gatewayAddressArray.push({
                value: arg,
              });
            });
          }
          if (!data.ip) {
            ipArray = [
              {
                value: "",
              },
              {
                value: "",
              },
              {
                value: "",
              },
              {
                value: "",
              },
            ];
          } else {
            ipData = data.ip.split(".");
            ipData.forEach((arg) => {
              ipArray.push({
                value: arg,
              });
            });
          }
          let subnetMaskData = [];
          let subnetMaskArray = [];
          this.$refs.addDialgRef.deviceGroupForm.ip = ipArray;
          this.$refs.addDialgRef.deviceGroupForm.gatewayAddress =
            gatewayAddressArray;
          // 编辑弹窗子网掩码格式
          if (!data.subnetMask) {
            subnetMaskArray = [
              {
                value: "",
              },
              {
                value: "",
              },
              {
                value: "",
              },
              {
                value: "",
              },
            ];
          } else {
            subnetMaskData = data.subnetMask.split(".");
            subnetMaskData.forEach((item) => {
              subnetMaskArray.push({
                value: item,
              });
            });
          }
          this.$refs.addDialgRef.deviceGroupForm.SubnetAdress = subnetMaskArray;
          this.isedit = true;
          this.editmetaData = data.metadata;
          // 此处传递的是老的token 需要深拷贝
          this.token = _.cloneDeep(data.token);
          this.$refs.addDialgRef.deviceGroupForm.assetTypeToken =
            data.assetType.token;
          // this.$refs.addDialgRef.metaDataJson = data.metadata;
        });
      });
      this.addFlag = true;
    },
    handDel(assetToken) {
      var that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delAssets(assetToken).then((res) => {
          this.$msg({
            type: "success",
            message: "删除成功!",
          });
          this.init();
        });
      });
    },
    handAdd() {
      getAssettypes({ page: 1, pageSize: 0 }).then((res) => {
        const { data } = res;
        this.typeList = data.results;
        this.isedit = false;
        this.addFlag = true;
      });
    },
    closeDialog(isRefresh) {
      // isRefresh是否刷新
      if (isRefresh) {
        this.init();
      }
      this.addFlag = false;
    },
    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.init();
    },
    getAssettypes() {
      getAssettypes({ page: 1, pageSize: 0 }).then((res) => {
        const { data } = res;
        this.typeList = data.results;
      });
    },
    async init(token) {
      // var tenantToken = "";
      // if (_.isString(this.$store.getters.tenant)) {
      //   tenantToken = JSON.parse(this.$store.getters.tenant).token;
      // } else {
      //   tenantToken = this.$store.getters.tenant.token;
      // }
      const res = await getAssetsList({
        // tenantToken,
        page: this.pageNum,
        pageSize: this.pageSize,
        name: this.searchName,
        ip: this.searchIp,
        atIds: this.gateWayType,
        includeAssetType: true,
      });
      const { data } = res;
      console.log("1 :>> ", data);
      this.total = data.numResults;
      this.tableData = data.results;
    },
  },
};
</script>

<style lang="scss" scoped>
.filter_data {
  z-index: 99;
  margin-left: 14px;
  width: 25%;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  position: relative;
}
.gateway {
  display: flex;
  justify-content: space-between;
  width: 100%;
  /* margin-bottom: 20px; */
}
.leftColumn {
  float: left;
}
.topBtn {
  position: absolute;
  right: 5.8%;
  top: -30px;
}
.rightColumn {
  /* margin-left: 30px; */
  width: 23%;
  background-color: #fff;
  overflow-x: hidden;
}
.switch-text {
  float: left;
  margin-top: -6px;
  margin-right: 8px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
}
.screenSwitch {
  float: left;
  margin-top: -5px;
}
.line {
  float: left;
  display: inline-block;
  height: 12px;
  width: 1px;
  vertical-align: middle;
  background-color: #999;
  margin: -1px 17px 0 15px;
}

.tab_height {
}
.my_network_box /deep/ .el-table {
  /* overflow: auto; */
}
.my_network_box /deep/ .el-table__row {
  td:not(.is-hidden):last-child {
    /* bottom: -1px; */
    right: -1px;
  }
}
.my_network_box /deep/ .el-table__header {
  th:not(.is-hidden):last-child {
    right: -1px;
  }
}
.my_network_box /deep/ .el-table__header {
  th:not(.is-hidden):first-child {
    bottom: 1px;
  }
}
.my_network_box /deep/ .el-table__header .is-leaf {
  bottom: 1px;
}
.my_network_box {
  position: relative;
  .sw_btn_box {
    display: flex;
    align-items: center;
  }
  /deep/ .el-form-item__label {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
}
</style>
